<!--
 * @Author: 徐建辰
 * @Date: 2022-06-06 10:00:56
 * @LastEditTime: 2022-06-06 10:05:52
 * @LastEditors: 徐建辰
 * @Description: 统计数值组件
-->
<template>
  <div class="statistic">
		<div class="statistic-title">
			{{title}}
			<el-tooltip v-if="tips" effect="light">
				<template #content>
					<div style="width: 200px;line-height: 2;">
						{{tips}}
					</div>
				</template>
				<el-icon class="statistic-tips"><el-icon-question-filled/></el-icon>
			</el-tooltip>
		</div>
		<div class="statistic-content">
			<span v-if="prefix" class="statistic-content-prefix">{{prefix}}</span>
			<span class="statistic-content-value">{{cmtValue}}</span>
			<span v-if="suffix" class="statistic-content-suffix">{{suffix}}</span>
		</div>
		<div v-if="description || $slots.default" class="statistic-description">
			<slot>
			{{description}}
			</slot>
		</div>
	</div>
</template>

<script setup>
import {computed} from 'vue'
import {groupSeparator} from '@/utils/tools'

// eslint-disable-next-line no-undef
const props = defineProps({
  title: { 
    type: String, 
    required: true, 
    default: "" 
  },
  value: { 
    type: Number, 
    required: true,
    default: 0
  },
  prefix: { 
    type: String, 
    default: ''
  },
  suffix: { 
    type: String, 
    default: '' 
  },
  description: { 
    type: String, 
    default: ''
  },
  tips: { 
    type: String, 
    default: '' 
  },
  groupSeparator: { 
    type: Boolean, 
    default: false 
  }
})

const cmtValue = computed(() => {
  const val = props.value
  return props.groupSeparator ? groupSeparator(val) : val
})
</script>

<style scoped>
.statistic-title {font-size: 12px;color: #999;margin-bottom: 10px;display: flex;align-items: center;}
.statistic-tips {margin-left: 5px;}
.statistic-content {font-size: 20px;color: #333;}
.statistic-content-value {font-weight: bold;}
.statistic-content-prefix {margin-right: 5px;}
.statistic-content-suffix {margin-left: 5px;font-size: 12px;}
.statistic-description {margin-top: 10px;color: #999;}

[data-theme='dark'] .statistic-content {color: #d0d0d0;}
</style>
